<template>
  <div class="container">
    <Ques :tableData="tableData"  @hchoic='hchoice' @SHchoice='SHchoice'></Ques>
    <el-card class="box-card">
      <div>数据一共{{ total }}条</div>
      <el-button @click="quanbu">全部</el-button>
      <el-button @click="daishenhe">待审核</el-button>
      <el-button @click="tongguo">通过</el-button>
      <el-button @click="jujue">拒绝</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="200"> </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template #default="{ row }">
            {{ hquestionType(row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="220">
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="220">
          <template #default='{row}'>
            {{formDate(row.addDate)}}
          </template>
           </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template #default="{ row }">
            {{ hdifficulty(row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100"> </el-table-column>
        <el-table-column prop="chkState" label="审核状态">
          <template #default="{ row }">
            {{ hchkType(row.chkState) }}
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="150"> </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="100"> </el-table-column>
        <el-table-column prop="publishState" label="发布状态">
          <template #default="{ row }">
            {{ hpublishState(row.publishState) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="text" @click="preview(row)">预览</el-button>
            <el-button
              type="text"
              :disabled="disabled(row)"
              @click="examine(row)"
              >审核</el-button
            >
            <el-button
              type="text"
              :disabled="row.publishState === 1"
              @click="edit(row)"
              >修改</el-button
            >
            <el-button type="text" @click="put(row)">{{
              row.publishState === 1 ? "下架" : "上架"
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.publishState === 1"
              @click="del(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="sizes, prev, pager, next,jumper"
        :total="total"
        @current-change="change"
        @size-change='changeSize'
        :page-size="params.pagesize"
         :page-sizes="[2, 3, 4, 5]"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="题目审核"
      :visible.sync="dialogVisible"
      width="30%"
      @close="closedialog"
    >
      <el-radio-group v-model="formData.chkState">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">拒绝</el-radio>
      </el-radio-group>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
        v-model="formData.chkRemarks"
        required
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closedialog">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <Dialog
      :showDialog="showDialog"
      @closeDialog="closeDialog"
      :object="object"
      :checkList='checkList'
      :radio='radio'
    ></Dialog>
  </div>
</template>

<script>
import Ques from '../components/ques.vue'
import {
  detail,
  choice,
  choicePublish,
  remove,
  choiceCheck

} from '@/api/hmmm/questions.js'
import Dialog from '../components/dialog.vue'
import dayjs from 'dayjs'
export default {
  name: 'questions',
  components: {
    Ques,
    Dialog
  },
  data () {
    return {
      tableData: [],
      total: 0,
      showDialog: false,
      object: {},
      params: {
        page: 1,
        pagesize: 3,
        keyword: ''
      },
      newparams: {
        page: 1,
        pagesize: 3,
        subjectID: null
      },
      Sparams: {
        page: 1,
        pagesize: 3,
        chkState: 0
      },
      Tparams: {
        page: 1,
        pagesize: 3,
        chkState: 1
      },
      Jparams: {
        page: 1,
        pagesize: 3,
        chkState: 2
      },
      dialogVisible: false,
      formData: {
        id: '',
        chkState: '',
        chkRemarks: ''
      },
      checkList: [],
      radio: null
    }
  },
  mounted () {
    this.hchoice()
  },
  methods: {
    quanbu () {
      this.hchoice()
      console.log(this.tableData)
    },
    async daishenhe () {
      const res = await choice(this.Sparams)
      this.tableData = res.data.items
      console.log(this.tableData)
      this.total = this.tableData.length
    },
    async  tongguo () {
      const res = await choice(this.Tparams)
      this.tableData = res.data.items
      this.total = this.tableData.length
    },
    async jujue () {
      const res = await choice(this.Jparams)
      this.tableData = res.data.items
      this.total = this.tableData.length
    },

    formDate (value, str = 'YYYY-MM-DD hh:mm:ss') {
      return dayjs(value).format(str)
    },
    // 修改
    async edit (row) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: row.id
        }
      })
    },
    changeList (type) {
      this.tableData = type
    },
    // 审核
    async confirm () {
      await choiceCheck(this.formData)
      this.hchoice()
      this.dialogVisible = false
    },
    // 打开审核弹窗
    async examine (row) {
      this.formData.id = row.id
      this.dialogVisible = true
    },
    // 关闭弹窗
    closedialog () {
      this.dialogVisible = false
    },
    // 删除
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.hchoice()

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 上架下架
    put (row) {
      this.$confirm(
        `您确定要${row.publishState === 1 ? '下架' : '上架'}这道题目吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          if (row.publishState === 1) {
            await choicePublish({ id: row.id, publishState: 0 })
          } else {
            await choicePublish({ id: row.id, publishState: 1 })
          }
          this.hchoice()
          this.$message({
            type: 'success',
            message: `${row.publishState === 1 ? '下架' : '上架'}成功`
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 审核按钮
    disabled (row) {
      if (row.chkState === 1 || row.chkState === 2) {
        return true
      } else {
        return false
      }
    },
    async hchoice (val) {
      const res = await choice({ page: this.params.page, pagesize: this.params.pagesize, keyword: val })
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    async SHchoice (val) {
      const res = await choice({ page: this.params.page, pagesize: this.params.pagesize, subjectID: val })
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 题型
    hquestionType (type) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简单'
      }
      return map[type]
    },
    // 难度
    hdifficulty (type) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[type]
    },
    // 审核状态
    hchkType (type) {
      const map = {
        0: '待审核',
        1: '通过',
        2: '拒绝'
      }
      return map[type]
    },
    // 发布状态
    hpublishState (type) {
      const map = {
        0: '下架',
        1: '上架'
      }
      return map[type]
    },
    changeSize (e) {
      this.params.pagesize = e
      this.hchoice()
    },
    // 分页
    change (page) {
      this.params.page = page
      this.hchoice()
    },
    // 预览
    async preview (row) {
      const res = await detail(row)
      console.log(res)
      this.object = res.data
      console.log(this.object)
      if (this.object.questionType === '2') {
        this.object.options.forEach(item => {
          if (item.isRight === 1) {
            this.checkList.push(item.code)
          }
        })
      } else if (this.object.questionType === '1') {
        this.object.options.map(item => {
          if (item.isRight === 1) {
            this.radio = item.code
          }
        })
      }
      this.showDialog = true
    },
    closeDialog () {
      this.showDialog = false
      this.choice()
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
